:root {
  /* active gradient color stops */
  --w7-sb-grad-a-1: #c4e5f6;
  --w7-sb-grad-a-2: #98d1ef;
  /* hovered gradient color stops */
  --w7-sb-grad-h-1: #eaf6fd;
  --w7-sb-grad-h-2: #bee6fd;

  --w7-sb-y: linear-gradient(to right, #e5e5e5, var(--w7-surface) 20%);
  --w7-sb-x: linear-gradient(to bottom, #e5e5e5, var(--w7-surface) 20%);
}

.has-scrollbar::-webkit-scrollbar {
  width: 16px;

  &:horizontal {
    height: 17px;
  }

  &-corner {
    background: var(--w7-el-bg);
  }

  &-track {
    &:vertical {
      background: var(--w7-sb-y);
    }

    &:horizontal {
      background: var(--w7-sb-x);
    }
  }

  &-thumb {
    border: 1px solid var(--w7-el-bd);
    border-radius: var(--w7-el-bdr);
    box-shadow: var(--w7-el-sd);
    background-color: var(--w7-el-bg);

    &:vertical {
      background: url("")
          no-repeat center,
        linear-gradient(to right, var(--w7-el-bg) 45%, var(--w7-el-bg-s-1) 45%, var(--w7-el-bg-s-2));
    }

    &:horizontal {
      background: url("")
          no-repeat center,
        linear-gradient(to bottom, var(--w7-el-bg) 45%, var(--w7-el-bg-s-1) 45%, var(--w7-el-bg-s-2));
    }

    &:hover {
      &:vertical {
        border-color: var(--w7-el-bd-h);
        background: url("")
            no-repeat center,
          linear-gradient(to right, var(--w7-sb-grad-h-1) 45%, var(--w7-sb-grad-h-2) 45%);
      }

      &:horizontal {
        border-color: var(--w7-el-bd-h);
        background: url("")
            no-repeat center,
          linear-gradient(to bottom, var(--w7-sb-grad-h-1) 45%, var(--w7-sb-grad-h-2) 45%);
      }
    }

    &:active {
      &:vertical {
        border-color: var(--w7-el-bd-a);
        background: url("")
            no-repeat center,
          linear-gradient(to right, var(--w7-sb-grad-a-1) 45%, var(--w7-sb-grad-a-2) 45%);
      }

      &:horizontal {
        border-color: var(--w7-el-bd-a);
        background: url("")
            no-repeat center,
          linear-gradient(to bottom, var(--w7-sb-grad-a-1) 45%, var(--w7-sb-grad-a-2) 45%);
      }
    }
  }

  &-button:horizontal:start:increment,
  &-button:horizontal:end:decrement,
  &-button:vertical:start:increment,
  &-button:vertical:end:decrement {
    /* https://stackoverflow.com/a/67476494/3916702 */
    display: none;
  }

  &-button {
    /* Add an invisible border to prevent shifting
       when hovering the scrollbar buttons */
    border: 1px solid transparent;

    &:vertical {
      height: 17px;

      &:start {
        background: url("./icon/button-up.svg"), var(--w7-sb-y);
      }

      &:end {
        background: url("./icon/button-down.svg"), var(--w7-sb-y);
      }
    }

    &:horizontal {
      width: 16px;

      &:start {
        background: url("./icon/button-left.svg"), var(--w7-sb-x);
      }

      &:end {
        background: url("./icon/button-right.svg"), var(--w7-sb-x);
      }
    }

    &:hover {
      border-color: var(--w7-el-bd);
      border-radius: var(--w7-el-bdr);
      box-shadow: var(--w7-el-sd);
      background-color: var(--w7-el-bg);

      &:vertical {
        height: 17px;

        &:start {
          border-color: var(--w7-el-bd-h);
          background: url("./icon/button-up.svg"), linear-gradient(to right, var(--w7-sb-grad-h-1) 45%, var(--w7-sb-grad-h-2) 45%);
        }

        &:end {
          border-color: var(--w7-el-bd-h);
          background: url("./icon/button-down.svg"), linear-gradient(to right, var(--w7-sb-grad-h-1) 45%, var(--w7-sb-grad-h-2) 45%);
        }
      }

      &:horizontal {
        width: 16px;

        &:start {
          border-color: var(--w7-el-bd-h);
          background: url("./icon/button-left.svg"), linear-gradient(to bottom, var(--w7-sb-grad-h-1) 45%, var(--w7-sb-grad-h-2) 45%);
        }

        &:end {
          border-color: var(--w7-el-bd-h);
          background: url("./icon/button-right.svg"), linear-gradient(to bottom, var(--w7-sb-grad-h-1) 45%, var(--w7-sb-grad-h-2) 45%);
        }
      }
    }

    &:active {
      border-color: var(--w7-el-bd);
      border-radius: var(--w7-el-bdr);
      box-shadow: var(--w7-el-sd);
      background-color: var(--w7-el-bg);

      &:vertical {
        height: 17px;

        &:start {
          border-color: var(--w7-el-bd-a);
          background: url("./icon/button-up.svg"), linear-gradient(to right, var(--w7-sb-grad-a-1) 45%, var(--w7-sb-grad-a-2) 45%);
        }

        &:end {
          border-color: var(--w7-el-bd-a);
          background: url("./icon/button-down.svg"), linear-gradient(to right, var(--w7-sb-grad-a-1) 45%, var(--w7-sb-grad-a-2) 45%);
        }
      }

      &:horizontal {
        width: 16px;

        &:start {
          border-color: var(--w7-el-bd-a);
          background: url("./icon/button-left.svg"), linear-gradient(to bottom, var(--w7-sb-grad-a-1) 45%, var(--w7-sb-grad-a-2) 45%);
        }

        &:end {
          border-color: var(--w7-el-bd-a);
          background: url("./icon/button-right.svg"), linear-gradient(to bottom, var(--w7-sb-grad-a-1) 45%, var(--w7-sb-grad-a-2) 45%);
        }
      }
    }
  }
}
